<template>
    <div>
      <h1>购物车</h1>
      <table>
        <thead>
          <tr>
            <th>全选</th>
            <th>image</th>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>金额</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in cartItems" :key="item.id">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td><img :src="item.image" alt="商品图片" width="100" height="100"></td>
            <td>{{ item.name }}</td>
            <td>${{ item.price }} 元</td>
            <td>
              <input type="number" v-model="item.quantity" min="1">

          </td>
            <td> {{ item.price * item.quantity }} 元 </td>
            <td><button>删除</button></td>
          </tr>
        </tbody>
      </table>
      <p>选中商品总价: {{ selectedTotalPrice }} 元</p>
    </div>
  </template>
  
  <script setup>
  import { ref, computed} from 'vue';
  
  const cartItems = ref([
    { id: 1, name: 'Laptop', price: 1000, image: 'src/imgs/icon/laptop.png', quantity: 1, selected: false },
    { id: 2, name: 'Phone', price: 500, image: 'src/imgs/icon/phone.png', quantity: 1, selected: false },
    { id: 3, name: 'Tablet', price: 300, image: 'src/imgs/icon/tablet.png', quantity: 1, selected: false },
    { id: 4, name: 'Headphones', price: 100, image: 'src/imgs/icon/headphones.png', quantity: 1, selected: false },
    { id: 5, name: 'Smartwatch', price: 200, image: 'src/imgs/icon/smartwatch.png', quantity: 1, selected: false },
    { id: 6, name: 'Camera', price: 800, image: 'src/imgs/icon/camera.png', quantity: 1, selected: false },
  ]);

  const selectedTotalPrice = computed(() => {
    return cartItems.value.reduce((acc, item) => {
      return item.selected ? acc + item.price * item.quantity : acc;
    }, 0);
  });

  </script>
  
  <style scoped>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  
  td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
  
  th {
    background-color: #f2f2f2;
  }
  </style>  